<template>
    <div>
        <div v-for="knowledgeSegment in knowledgeSegmentList" :key="knowledgeSegment.id"
            class="knowledge-segment-container">
            <span>
                {{ knowledgeSegment.text }}
            </span>
        </div>
    </div>

</template>
<script setup lang="js">
import { ref, onMounted, defineProps } from 'vue';
import ragKnowledgeSegmentApi from '@/api/ragKnowledgeSegmentApi';
const props = defineProps({
    knowledgeSetId: {
        type: Number,
        default: -1
    }
})
const knowledgeSegmentList = ref([]);

const fetchKnowledgeSegmentList = () => {
    ragKnowledgeSegmentApi.list({ knowledgeSetId: props.knowledgeSetId }).then((res) => {
        knowledgeSegmentList.value = res.data;
    });
};

onMounted(() => {
    console.log("knowledgeSetId:", props.knowledgeSetId);
    fetchKnowledgeSegmentList()
});
</script>

<style lang="scss" scoped>
.knowledge-segment-container {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    background-color: #f9f9f9;
    font-size: 13px;
}
</style>